<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <div th:insert="commen/head :: header">
    </div>
</head>
<body  style="background-color: rgb(242,244,247)">
<div th:insert="commen/navigationBar :: topNavBar"></div>
    <div class="container" style="background-color: #ffffff;">
        <div class="row">
            <div class="col-md-12">
                <div class="text-center">
                    <h2 style="font-weight: bold;">新建作业</h2>
                </div>
            </div>
        </div>
        <div class="row" style="margin-bottom: 10px;">
            <div style="margin-left: 10px;">
                <form th:action="@{/addQuestionBank}" method="post" style="display: inline-flex;">
<!--                    <input type="hidden" name="homeworkId" th:value="${homeworkId}">-->
                    <input class="form-control" type="text" name="questionBankName" th:value="${session.questionBankName}" style="width: 600px; margin-right: 5px; font-size: 18px">
<!--                    <input type="text" name="questionBankName" th:value="${session.questionBankName}" style="width: 300px;">-->
                    <input class="btn btn-success" type="submit" value="完成">
                </form>
            </div>

        </div>
        <div class="row" style="margin-bottom: 10px;">
            <div class="col-md-12">
                <span style="font-size: 16px">添加题目:</span>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal_addChoiceQuestion">
                    选择题
                </button>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal_answerQuestions">
                    填空题
                </button>
            </div>
        </div>
        <div class="row" style="border: 4px solid rgb(42,171,210); border-radius: 10px; padding-bottom: 6px;">
            <!--选择题遍历-->
            <div class="col-md-12" th:if="${choiceQuestions != null}">
                <div th:each="choiceQuestion : ${choiceQuestions}" style="border: 1px solid; border-radius: 10px; margin-top: 5px; padding: 10px;">
                    <span style="font-size: 18px;font-weight: bold;">选择题: </span><span style="font-size: 18px" th:text="${choiceQuestion.getCqTitle()}"></span><br>
                    <span style="font-size: 18px">A: </span><span style="font-size: 18px" th:text="${choiceQuestion.getCqA()}"></span><br>
                    <span style="font-size: 18px">B: </span><span style="font-size: 18px" th:text="${choiceQuestion.getCqB()}"></span><br>
                    <span style="font-size: 18px">C: </span><span style="font-size: 18px" th:text="${choiceQuestion.getCqC()}"></span><br>
                    <span style="font-size: 18px">D: </span><span style="font-size: 18px" th:text="${choiceQuestion.getCqD()}"></span><br>
                    <span style="font-size: 18px;font-weight: bold;">正确答案: </span><span style="font-size: 18px;font-weight: bold;" th:text="${choiceQuestion.getCqCorrect()}"></span><br>
                    <button class="btn btn-primary" th:onclick="openUpdateChioceQuestionModal([[${choiceQuestion.getCqId()}]], [[${choiceQuestion.getCqTitle()}]], [[${choiceQuestion.getCqA()}]], [[${choiceQuestion.getCqB()}]], [[${choiceQuestion.getCqC()}]], [[${choiceQuestion.getCqD()}]], [[${choiceQuestion.getCqCorrect()}]])" id="openUpdateModel" data-toggle="modal" data-target="#Modal_updateChoiceQuestion" role="button">修改</button>
<!--                    <button class="btn btn-primary"  th:value="${choiceQuestion.getCqId()}" id="openUpdateModel" data-toggle="modal" data-target="#Modal_updateChoiceQuestion" role="button">修改</button>-->
                    <a class="btn btn-primary" th:href="@{'/deleteChoiceQuestion/' + ${choiceQuestion.getCqId()}}" role="button">删除</a>
                </div>
            </div>
            <!--简答题遍历-->
            <div class="col-md-12" th:if="${answerQuestions != null}">
                <div th:each="answerQuestion : ${answerQuestions}" style="border: 1px solid; border-radius: 10px; margin-top: 5px; padding: 10px;">
                    <span style="font-size: 18px; font-weight: bold;">简答题:</span><br>
                    <span style="font-size: 18px">题目内容:  </span><span style="font-size: 18px" th:text="${answerQuestion.getAnswerQuestionContent()}"></span><br>
                    <span style="font-size: 18px">正确答案:  </span><span style="font-size: 18px" th:text="${answerQuestion.getAnswerQuestionKey()}"></span><br>
                    <span style="font-size: 18px">答案解析:  </span><span style="font-size: 18px" th:text="${answerQuestion.getAnswerQuestionAnalysis()}"></span><br>

                    <button class="btn btn-primary" th:onclick="openUpdateAnswerQuestionModal([[${answerQuestion.getAnswerQuestionId()}]], [[${answerQuestion.getAnswerQuestionContent()}]], [[${answerQuestion.getAnswerQuestionKey()}]], [[${answerQuestion.getAnswerQuestionAnalysis()}]])" id="openAnswerUpdateModel"  data-toggle="modal" data-target="#Modal_updateAnswerQuestion" role="button">修改</button>
                    <a class="btn btn-primary" th:href="@{'/deleteAnswerQuestion/' + ${answerQuestion.getAnswerQuestionId()}}" role="button">删除</a>
                </div>
            </div>

            <div th:if="${choiceQuestions == null && answerQuestions == null}">
                <h2 class="text-center">暂无题目</h2>
            </div>

        </div>
    </div>

    <!--添加选择题模态框-->
    <div class="modal fade" id="Modal_addChoiceQuestion">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">添加选择题</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form th:action="@{/addChoiceQuestion}" method="post">
                        <input type="hidden" name="questionBankId" th:value="${session.questionBankId}">
                        <textarea id="oldCqTitle" class="form-control" rows="3" name="cqTitle"></textarea><br>
                        A: <input style="margin-bottom: 5px;font-size: 16px" type="text" name="cqA" id="cqA"><br>
                        B: <input style="margin-bottom: 5px;font-size: 16px"  type="text" name="cqB" id="cqB"><br>
                        C: <input style="margin-bottom: 5px;font-size: 16px"  type="text" name="cqC" id="cqC"><br>
                        D: <input style="margin-bottom: 5px;font-size: 16px"  type="text" name="cqD" id="cqD"><br>
                        正确答案:
                        <select class="form-control" name="cqCorrect">
                            <option value="A">A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
                            <option value="D">D</option>
                        </select><br>
                        <button class="btn-success btn" id="addCQ" type="submit" value="完成">完成</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--添加简答题模态框-->
    <div class="modal fade" id="Modal_answerQuestions">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">添加填空题</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <input type="hidden" name="questionBankId" th:value="${session.questionBankId}">
                    <form th:action="@{/addAnswerQuestion}" method="post">
                        题目内容: <br><textarea class="form-control" type="text" name="answerQuestionContent"></textarea><br>
                        正确答案: <br><textarea class="form-control" type="text" name="answerQuestionKey"></textarea><br>
                        答案解析: <br><textarea class="form-control" type="text" name="answerQuestionAnalysis"></textarea><br>
                        <input class="btn-success btn" type="submit" value="完成">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--修改选择题模态框-->
    <div class="modal fade" id="Modal_updateChoiceQuestion">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">修改</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form th:action="@{/updateChoiceQuestion}" method="post">
                        <input type="hidden" name="questionBankId" th:value="${session.questionBankId}">
                        <input type="hidden" name="cqId" id="choiceQuestionId">
                        <textarea id="newCqTitle" class="form-control" rows="3" name="cqTitle"></textarea><br>
                        A: <input style="margin-bottom: 5px;font-size: 16px"  id="newCqA" type="text" name="cqA"><br>
                        B: <input style="margin-bottom: 5px;font-size: 16px"  id="newCqB" type="text" name="cqB"><br>
                        C: <input style="margin-bottom: 5px;font-size: 16px"  id="newCqC" type="text" name="cqC"><br>
                        D: <input style="margin-bottom: 5px;font-size: 16px"  id="newCqD" type="text" name="cqD"><br>
                        正确答案:
                        <select class="form-control" id="newCqCorrect" name="cqCorrect">
                            <option value="A">A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
                            <option value="D">D</option>
                        </select><br>
                        <input class="btn-success btn" type="submit" value="完成">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--修改简答题模态框-->
    <div class="modal fade" id="Modal_updateAnswerQuestion">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">修改</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form th:action="@{/updateAnswerQuestion}" method="post">
                        <input type="hidden" name="answerQuestionId" id="newId">
                        题目内容: <br><textarea class="form-control" id="newContent" type="text" name="answerQuestionContent"></textarea><br>
                        正确答案: <br><textarea class="form-control" id="newKey" type="text" name="answerQuestionKey"></textarea><br>
                        答案解析: <br><textarea class="form-control" id="newAnalysis" type="text" name="answerQuestionAnalysis"></textarea><br>
                        <input class="btn-success btn" type="submit" value="完成">
                    </form>
                </div>
            </div>
        </div>
    </div>

<script>
    let newId = document.getElementById("newId");
    let newContent = document.getElementById("newContent");
    let newKey = document.getElementById("newKey");
    let newAnalysis = document.getElementById("newAnalysis");
    function openUpdateAnswerQuestionModal(id, content, key, analysis) {
        newId.value = id;
        newContent.value = content;
        newKey.value = key;
        newAnalysis.value = analysis;
    }

    let choiceQuestionId = document.getElementById("choiceQuestionId");
    let newCqTitle = document.getElementById("newCqTitle");
    let newCqA = document.getElementById("newCqA");
    let newCqB = document.getElementById("newCqB");
    let newCqC = document.getElementById("newCqC");
    let newCqD = document.getElementById("newCqD");
    let newCqCorrect = document.getElementById("newCqCorrect");
    let selectCorrect = document.getElementById("newCqCorrect").options;
    function openUpdateChioceQuestionModal(cqId, cqTitle, cqA, cqB, cqC, cqD, cqCorrect) {
        choiceQuestionId.value = cqId;
        newCqTitle.value = cqTitle;
        newCqA.value = cqA;
        newCqB.value = cqB;
        newCqC.value = cqC;
        newCqD.value = cqD;
        newCqCorrect.value = cqCorrect;
        if (cqCorrect == 'A') {
            for (let i = 0; i < selectCorrect.length; i++) {
                selectCorrect[i].text = 'A'
            }
            selectCorrect[1].text = 'B';
            selectCorrect[2].text = 'C';
            selectCorrect[3].text = 'D';
        } else if (cqCorrect == 'B') {
            for (let i = 0; i < selectCorrect.length; i++) {
                selectCorrect[i].text = 'B'
            }
            selectCorrect[0].text = 'A';
            selectCorrect[2].text = 'C';
            selectCorrect[3].text = 'D';
        } else if (cqCorrect == 'C') {
            for (let i = 0; i < selectCorrect.length; i++) {
                selectCorrect[i].text = 'C'
            }
            selectCorrect[1].text = 'B';
            selectCorrect[0].text = 'A';
            selectCorrect[3].text = 'D';
        } else if (cqCorrect == 'D') {
            for (let i = 0; i < selectCorrect.length; i++) {
                selectCorrect[i].text = 'D'
            }
            selectCorrect[1].text = 'B';
            selectCorrect[2].text = 'C';
            selectCorrect[0].text = 'A';
        }
    }
    // let Qa = document.getElementById("cqA");
    // let Qb = document.getElementById("cqB");
    // let Qc = document.getElementById("cqC");
    // let Qd = document.getElementById("cqD");
    // let addCQ = document.getElementById("addCQ");
    // addCQ = function () {
    //     alert("123");
    //     if (Qa.value == Qb.value && Qa.value == Qc.value && Qa.value == Qd.value && Qb.value == Qc.value && Qb.value == Qd.value && Qc.value == Qd.value) {
    //         alert("选项内容不能相同！");
    //     } else {
    //         addCQ.onsubmit();
    //     }
    // }

</script>
</body>
</html>